﻿
$(function () {
    // 头部四条总量统计接口
    var getCurrentCountUrl = ''

    // 柱状图数据接口
    var echarts4Url = ''

    // 饼图中第一个接口
    var echarts_12Url = ''

    // 饼图中第二个接口
    var echarts_13Url = ''

    //饼图第三个接口
    var echarts_21Url = ''

    //饼图第四个接口
    var echarts_31Url = ''

    // 折线图接口
    var echarts_2Url = ''

    // 表格数据接口
    var tableDataIdUrl = ''
    // 双柱状图接口
    var echarts_ztUrl = ''
    // 显示右上角时间
    var t = null;
    t = setTimeout(time, 1000);
    function time() {
        clearTimeout(t);
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000);
    }
    // 以逗号分隔数据
    var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
    // 获取当前数据总量函数
    // getCurrentCount(getCurrentCountUrl);

    // 折线图
    echarts_2(echarts_2Url);

    // 柱状图
    echarts4(echarts4Url);

    // 饼图中第一个
    echarts_12(echarts_12Url);

    // 饼图中第二个
    echarts_13(echarts_13Url);

    //饼图中第四个
    echarts_31(echarts_31Url);

    // 表格数据
    tableDataId(tableDataIdUrl)

    //第三个饼图
    echarts_21(echarts_21Url);

    //双柱状图
    echarts_zt(echarts_ztUrl)


    //X秒请求一次数据
    // 头部四条总量统计接口
    // setInterval(function () { getCurrentCount(getCurrentCountUrl) }, 5000);
    // 柱状图数据接口
    // setInterval(function () { echarts4(echarts4Url) }, 5000);
    // 饼图中第一个接口
    // setInterval(function () { echarts_12(echarts_12Url) }, 5000);
    // 饼图中第二个接口
    // setInterval(function () { echarts_13(echarts_13Url) }, 5000);
    // 折线图接口
    // setInterval(function () { echarts_2(echarts_2Url) }, 5000);
    // 表格数据接口
    // setInterval(function () { tableDataId(tableDataIdUrl) }, 5000);
    // 饼图中第四个
    // setInterval(function () { echarts_31(echarts_31Url); }, 5000);
    // 第三个饼图
    // setInterval(function () { echarts_21(echarts_21Url); }, 5000);
    // 双柱状图
    // setInterval(function () { echarts_zt(echarts_ztUrl) }, 5000);
    // 数字渐变动画
    // 当前总量动画
    $("#curCount").animateNumber({
        number: 135376371,
        numberStep: comma_separator_number_step
    }, 2000);
    // 本月新增
    $("#thisMCount").animateNumber({
        number: 1429931,
        numberStep: comma_separator_number_step
    }, 2000);
    // 上月新增
    $("#lastMCount").animateNumber({
        number: 6291931,
        numberStep: comma_separator_number_step
    }, 2000);
    //  本日新增
    $("#ydayIncCount").animateNumber({
        number: 3912410,
        numberStep: comma_separator_number_step
    }, 2000);
    // 数据总量集合
    var numflag = 1;//标识，标识第几次请求数据
    var curCount = [];//仓储，存储当前总量，用与新数据对比，数字渐变
    var thisMCount = [];//仓储，存储本月新增，用与新数据对比，数字渐变
    var lastMCount = [];//仓储，存储上月新增，用与新数据对比，数字渐变
    var ydayIncCount = [];//仓储，存储本日新增，用与新数据对比，数字渐变
    // 当前总量数据获取函数
    function getCurrentCount(getCurrentCountUrl) {
        $.ajax({
            type: "post",
            url: getCurrentCountUrl,
            dataType: "json", //返回数据形式为json
            success: function (res) {
                console.log(res);
                //res.data结果集数据格式 [135376371,3912410.1429931,6291931]按照总量、本月、上月、本日顺序返回
                // 保存数据，用来生成第二次动画
                if (res.status == 200) {
                    curCount.push(res.data[0])
                    thisMCount.push(res.data[1])
                    lastMCount.push(res.data[2])
                    ydayIncCount.push(res.data[3])
                    if (numflag == 1) {
                        //判断是第一次请求
                        $("#curCount").animateNumber({
                            number: res.data[0],
                            numberStep: comma_separator_number_step
                        }, 2000);
                        // 本月新增
                        $("#thisMCount").animateNumber({
                            number: res.data[1],
                            numberStep: comma_separator_number_step
                        }, 2000);
                        // 上月新增
                        $("#lastMCount").animateNumber({
                            number: res.data[2],
                            numberStep: comma_separator_number_step
                        }, 2000);
                        //  本日新增
                        $("#ydayIncCount").animateNumber({
                            number: res.data[3],
                            numberStep: comma_separator_number_step
                        }, 2000);
                    } else {
                        // 当前总量动画
                        $("#curCount").prop('number', curCount[0]).animateNumber({
                            number: res.data[0],
                            numberStep: comma_separator_number_step
                        }, 8000);
                        // 本月新增
                        $("#thisMCount").prop('number', thisMCount[0]).animateNumber({
                            number: res.data[1],
                            numberStep: comma_separator_number_step
                        }, 8000);
                        // 上月新增
                        $("#lastMCount").prop('number', lastMCount[0]).animateNumber({
                            number: res.data[2],
                            numberStep: comma_separator_number_step
                        }, 8000);
                        //  本日新增
                        $("#ydayIncCount").prop('number', ydayIncCount[0]).animateNumber({
                            number: res.data[3],
                            numberStep: comma_separator_number_step
                        }, 8000);
                        // 每次变化完清除对比数组中数据
                        curCount.shift();//去掉数组第一项，保持数组整洁
                        thisMCount.shift();//去掉数组第一项，保持数组整洁
                        lastMCount.shift();//去掉数组第一项，保持数组整洁
                        ydayIncCount.shift();//去掉数组第一项，保持数组整洁
                    }
                }
            },
        });
    }
    // 折线图 注意:数据格式顺序需按照要求
    function echarts_2(echarts_2Url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#2d5595'
                    }
                }
            },
            legend: {
                top: '1%',
                bottom: '1%',
                data: ['七日数据总量趋势'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            grid: {
                left: '10',
                top: '30',
                right: '20',
                bottom: '10',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                data: ['30/4', '1/5', '2/5', '3/5', '4/5', '5/5', '6/5', '7/5', '8/5', '9/5', '10/5', '11/5', '12/5', '13/5', '14/5', '15/5', '16/5', '17/5', '18/5', '19/5', '20/5', '21/5', '22/5', '23/5', '24/5', '25/5', '26/5', '27/5', '28/5', '29/5', '30/5']

            }],
            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: fontSizeScale(0.3),
                    },
                },
                splitLine: {
                    show: false
                }
            }],
            series: [
                {
                    name: '七日数据总量趋势',
                    type: 'line',
                    // smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    // showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#0184d5',
                            width: 2
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0184d5',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    label: {
                        normal: {
                            formatter: function (a) {//设置字体每个三位用“，”隔开
                                var result = [],
                                    counter = 0,
                                    num = a.data;
                                num = (num || 0).toString().split('');
                                for (var i = num.length - 1; i >= 0; i--) {
                                    counter++;
                                    result.unshift(num[i]);
                                    if (!(counter % 3) && i != 0) {
                                        result.unshift(',');
                                    }
                                }
                                result = result.join('');
                                return result;
                            }
                        }
                    },
                    data: [63, 41, 39, 48, 34, 48, 63, 16, 39, 48, 34, 41, 63, 41, 39, 48, 34, 48, 63, 16, 39, 48, 34, 41, 63, 16, 39, 48, 34, 41, 11]

                },

            ]

        };
        // $.ajax({
        //     type: "post",
        //     url: echarts_2Url,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         //console.log(res);
        //         // res.data 数据格式{date:[],thirtyData:[]}
        //         // res.data.date: ['30/4', '1/5', '2/5', '3/5', '4/5', '5/5', '6/5', '7/5', '8/5', '9/5', '10/5', '11/5', '12/5', '13/5', '14/5', '15/5', '16/5', '17/5', '18/5', '19/5', '20/5', '21/5', '22/5', '23/5', '24/5', '25/5', '26/5', '27/5', '28/5', '29/5', '30/5']
        //         // res.data.thirtyData:[[63, 41, 39, 48, 34, 48, 63, 16, 39, 48, 34, 41, 63, 41, 39, 48, 34, 48, 63, 16, 39, 48, 34, 41, 63, 16, 39, 48, 34, 41, 11],[],[],[]]  注意:返回的30天数据，顺序按照行管、危管...保安顺序,顺序不可变
        //         if (res.status == 200) {
        //             // 设置前30天日期
        //             option.xAxis[0].data = res.data.date
        //             // 设置30天数据
        //             for (i = 0; i < option.series.length; i++) {
        //                 option.series[i].data = res.data.thirtyData[i]
        //             }
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    // 饼图中第一个
    function echarts_12(echarts_12Url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb2'));
        var option = {
            title: [{
                text: '系统平台数据量占比',
                top: '4%',
                left: 'center',
                textStyle: {
                    color: '#dde1e4',
                    fontSize: fontSizeScale(0.4)
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function (p) {   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '78%',
                itemWidth: 10,
                itemHeight: 10,
                data: ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: fontSizeScale(0.32),
                }
            },
            series: [
                {
                    name: '系统平台数据量占比',
                    type: 'pie',
                    center: ['50%', '40%'],
                    radius: ['0', '50%'],
                    color: ['#1d81de', '#dde1e4', '#7aa8d5', '#0f36e2', '#06a0ab', '#06b4ab', '#fdeb81', '#dde1e4'],
                    label: { show: false },
                    labelLine: { show: false },
                    data: [
                        { value: 5, name: '行管' },
                        { value: 1, name: '危管' },
                        { value: 6, name: '公秩' },
                        { value: 2, name: '行动' },
                        { value: 9, name: '法制' },
                        { value: 3, name: '保安' },
                        { value: 10, name: '大型活动' },
                        { value: 16, name: '处置' },
                    ]
                }
            ]
        };
        // $.ajax({
        //     type: "post",
        //     url: echarts_12Url,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         // res.data数据格式
        //         // res.data {name:[],date:[]}
        //         // res.data.name ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置']
        //         // res.data.date
        //         //  [
        //         //    { value: 5, name: '行管' },
        //         //    { value: 1, name: '危管' },
        //         //    { value: 6, name: '公秩' },
        //         //    { value: 2, name: '行动' },
        //         //    { value: 9, name: '法制' },
        //         //    { value: 3, name: '保安' },
        //         //    { value: 10, name: '大型活动' },
        //         //    { value: 16, name: '处置' },
        //         //  ]
        //         if (res.status == 200) {
        //             // 赋值饼图名字显示名字
        //             option.legend.data = res.data.name
        //             option.series[0].data = res.data.data
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //饼图第三个接口
    function echarts_21(echarts_21Url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb21'));
        var option = {
            title: [{
                text: '数据库类型占比',
                top: '4%',
                left: 'center',
                textStyle: {
                    color: '#dde1e4',
                    fontSize: fontSizeScale(0.4)
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function (p) {   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '78%',
                itemWidth: 10,
                itemHeight: 10,
                data: ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: fontSizeScale(0.31),
                }
            },
            series: [
                {
                    name: '数据库类型占比',
                    type: 'pie',
                    center: ['50%', '40%'],
                    radius: ['0', '40%'],
                    color: ['#1d81de', '#dde1e4', '#7aa8d5', '#cd7f32', '#06a0ab', '#06b4ab', '#fdeb81', '#dde1e4'],
                    label: { show: true },
                    labelLine: { show: true },
                    data: [
                        { value: 5, name: '行管' },
                        { value: 1, name: '危管' },
                        { value: 6, name: '公秩' },
                        { value: 2, name: '行动' },
                        { value: 9, name: '法制' },
                        { value: 3, name: '保安' },
                        { value: 10, name: '大型活动' },
                        { value: 16, name: '处置' },
                    ]
                }
            ]
        };
        // $.ajax({
        //     type: "post",
        //     url: echarts_21Url,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         // res.data数据格式
        //         // res.data {name:[],date:[]}
        //         // res.data.name ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置']
        //         // res.data.date
        //         //  [
        //         //    { value: 5, name: '行管' },
        //         //    { value: 1, name: '危管' },
        //         //    { value: 6, name: '公秩' },
        //         //    { value: 2, name: '行动' },
        //         //    { value: 9, name: '法制' },
        //         //    { value: 3, name: '保安' },
        //         //    { value: 10, name: '大型活动' },
        //         //    { value: 16, name: '处置' },
        //         //  ]
        //         if (res.status == 200) {
        //             // 赋值饼图名字显示名字
        //             option.legend.data = res.data.name
        //             option.series[0].data = res.data.data
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    // 柱状图 注意:数据格式顺序需按照要求
    function echarts4(echarts4Url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        var option = {
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '0',
                top: '14%',
                right: '0%',
                bottom: '10',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['行管', '危管', '公共秩序', '行动', '处置', '法制', '大型活动', '保安'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: fontSizeScale(0.32),
                    },
                    rotate: -60
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: fontSizeScale(0.3),
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    show: false
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: [212, 336, 897, 217, 1507, 1288, 666, 555],
                    barWidth: '34%', //柱子宽度
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            distance: '12',
                            align: 'center',
                            textStyle: {//柱子顶部数字颜色
                                color: '#ffeb7b',
                                fontFamily: 'electronicFont',
                                fontSize: '16',//柱子顶部颜色
                                // textBorderColor:'#fff',
                                // textBorderWidth:'1',
                                textShadowColor: '#000',//顶部数值的文字阴影
                                textShadowBlur: '5',
                                textShadowOffsetX: '3',
                                textShadowOffsetY: '2'
                            },
                            formatter: function (a) {//设置字体每个三位用“，”隔开
                                var result = [],
                                    counter = 0,
                                    num = a.data;
                                num = (num || 0).toString().split('');
                                for (var i = num.length - 1; i >= 0; i--) {
                                    counter++;
                                    result.unshift(num[i]);
                                    if (!(counter % 3) && i != 0) {
                                        result.unshift(',');
                                    }
                                }
                                // result.unshift("¥");
                                result = result.join('');
                                // result = "<span style='color:red;font-size:20px'>"+result.join('')+"</span>";

                                return result;
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {

                                //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                                var colorList = [

                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5'],
                                    ['#0671d4', '#3d97ed', '#bed7f5']

                                ];

                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }

                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 1, color: colorList[index][0] },
                                        { offset: 0.5, color: colorList[index][1] },
                                        { offset: 0, color: colorList[index][2] }
                                    ]);
                            },
                            barBorderRadius: 5  //柱状角成椭圆形
                        },

                    }
                }

            ]
        };
        // $.ajax({
        //     type: "post",
        //     url: echarts4Url,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         // res数据格式
        //         // res.data {name:[],date:[]}
        //         // res.data.name ['行管', '危管', '公共秩序', '行动', '处置', '法制', '大型活动', '保安']
        //         // res.data.date [212, 336, 897, 217, 1507, 1288, 666, 555] 注意:名字与数据一一对应，不可变
        //         if (res.status == 200) {
        //             option.xAxis[0].data = res.data.name
        //             option.series[0].data = res.data.data
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    // 饼图中第二个
    function echarts_13(echarts_13Url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb3'));
        var option = {
            title: [{
                text: '业务模块数据数据量占比',
                top: '4%',
                left: 'center',
                textStyle: {
                    color: '#dde1e4',
                    fontSize: fontSizeScale(0.4)
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function (p) {   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '78%',
                itemWidth: 10,
                itemHeight: 10,
                data: ['110警情', '社采', '移动警务', '警综', '治综'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: fontSizeScale(0.32),
                }
            },
            series: [
                {
                    name: '业务模块数据数据量占比',
                    type: 'pie',
                    center: ['50%', '40%'],
                    radius: ['20%', '50%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    lableLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    color: ['#d53a35', '#dde1e4', '#7aa8d5', '#d48265', '#9fdabf', '#06b4ab'],
                    data: [
                        { value: 6, name: '110警情' },
                        { value: 5, name: '社采' },
                        { value: 3, name: '移动警务' },
                        { value: 4, name: '警综' },
                        { value: 2, name: '治综' }
                    ]
                }
            ]
        };
        // $.ajax({
        //     type: "post",
        //     url: echarts_13Url,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         // res.data数据格式
        //         // res.data {name:[],date:[]}
        //         // res.data.name ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置']
        //         // res.data.date
        //         // [
        //         //     { value: 6, name: '110警情' },
        //         //     { value: 5, name: '社采' },
        //         //     { value: 3, name: '移动警务' },
        //         //     { value: 4, name: '警综' },
        //         //     { value: 2, name: '治综' }
        //         // ]
        //         if (res.status == 200) {
        //             // 赋值饼图名字显示名字
        //             option.legend.data = res.data.name
        //             option.series[0].data = res.data.data
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    //饼状图第四个接口
    function echarts_31(echarts_31Url) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb31'));
        var option = {
            title: [{
                text: '数据元情况',
                top: '4%',
                left: 'center',
                textStyle: {
                    color: '#dde1e4',
                    fontSize: fontSizeScale(0.4)
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function (p) {   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '78%',
                itemWidth: 10,
                itemHeight: 10,
                data: ['110警情', '社采', '移动警务', '警综', '治综'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: fontSizeScale(0.32),
                }
            },
            series: [
                {
                    name: '数据元情况',
                    type: 'pie',
                    center: ['50%', '40%'],
                    radius: ['15%', '40%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    lableLine: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    color: ['#d53a35', '#dde1e4', '#7aa8d5', '#d48265', '#9fdabf', '#06b4ab'],
                    data: [
                        { value: 6, name: '110警情' },
                        { value: 5, name: '社采' },
                        { value: 3, name: '移动警务' },
                        { value: 4, name: '警综' },
                        { value: 2, name: '治综' }
                    ]
                }
            ]
        };
        // $.ajax({
        //     type: "post",
        //     url: echarts_31Url,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         // res.data数据格式
        //         // res.data {name:[],date:[]}
        //         // res.data.name ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置']
        //         // res.data.date
        //         // [
        //         //     { value: 6, name: '110警情' },
        //         //     { value: 5, name: '社采' },
        //         //     { value: 3, name: '移动警务' },
        //         //     { value: 4, name: '警综' },
        //         //     { value: 2, name: '治综' }
        //         // ]
        //         if (res.status == 200) {
        //             // 赋值饼图名字显示名字
        //             option.legend.data = res.data.name
        //             option.series[0].data = res.data.data
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    //双柱状图表
    function echarts_zt(echarts_ztUrl) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb311'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: '10%',//调整顶部色块位置
                right: '2%',
                orient: 'vertical',
                selectedMode: true,
                itemGap: 5,
                data: [
                    {
                        name: '数量1',
                        textStyle: {
                            color: '#ffffff99'
                        }
                    }, {
                        name: '数量2',
                        textStyle: {
                            color: '#ffffff99'
                        }
                    }
                ]
            },
            grid: {
                top: '26%',
                left: '14%',
                right: '0%',
                bottom: '8%', //图表距离底部距离
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1/5', '2/5', '3/5', '4/5', '5/5', '6/5', '7/5'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: fontSizeScale(0.32),
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: fontSizeScale(0.3),
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        show: false
                    }
                },
            ],
            series: [
                {
                    name: '数量1',
                    type: 'bar',
                    barGap: 0,
                    textStyle: {
                        color: '#fff'
                    },
                    itemStyle: {
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {

                                //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                                var colorList = [

                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5'],
                                    ['#f93737', '#3480c8', '#bed7f5']

                                ];

                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }

                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 1, color: colorList[index][0] },
                                        { offset: 0.5, color: colorList[index][1] },
                                        { offset: 0, color: colorList[index][2] }
                                    ]);
                            },
                            barBorderRadius: 5  //柱状角成椭圆形
                        },

                    },
                    barCategoryGap: '30%',
                    barMinHeight: 10,//设置柱子的最小高度
                    data: [311111, 1121, 2311, 6011, 511, 6611, 7811]
                },
                {
                    name: '数量2',
                    type: 'bar',
                    distance: '1',
                    barCategoryGap: '30%',
                    itemStyle: {
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {

                                //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                                var colorList = [

                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5'],
                                    ['#50c205', '#5ee2af', '#bed7f5']

                                ];

                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }

                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 1, color: colorList[index][0] },
                                        { offset: 0.5, color: colorList[index][1] },
                                        { offset: 0, color: colorList[index][2] }
                                    ]);
                            },
                            barBorderRadius: 5  //柱状角成椭圆形
                        },
                    },
                    barMinHeight: 10,//设置柱子的最小高度
                    data: [55111, 71211, 341341, 51221, 33211, 12351, 17901]
                }
            ]
        };
        // $.ajax({
        //     type: "post",
        //     url: echarts_ztUrl,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         // res.data数据格式
        //         // res.data {name:[],data:[[],[]]}
        //         // res.data.name ['行管', '危管', '公秩', '行动', '法制', '保安', '大型活动', '处置']
        //         // res.data.data[0]
        //         // [55111, 71211, 341341, 51221, 33211, 12351, 17901]
        //         // res.data.data[1]
        //         // [55111, 71211, 341341, 51221, 33211, 12351, 17901]
        //         if (res.status == 200) {
        //             // 赋值饼图名字显示名字
        //             option.xAxis[0].data = res.data.name
        //             option.series[0].name = res.data.title[0]
        //             option.series[1].name = res.data.title[1]
        //             option.legend.data[0].name = res.data.title[0]
        //             option.legend.data[1].name = res.data.title[0]
        //             option.series[0].data = res.data.data[0]
        //             option.series[1].data = res.data.data[1]
        //             // 使用刚指定的配置项和数据显示图表。
        //             myChart.setOption(option);
        //             window.addEventListener("resize", function () {
        //                 myChart.resize();
        //             });
        //         }
        //     },
        // });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    // 表格数据接口
    function tableDataId(tableDataIdUrl) {
        // $("#tableDataId").html('')
        // // var data = [{ name: '110警情系统', count: 123456, upDateTime: '2020-05-30 12:12:12' }, { name: '110警情系统', count: 123456, 'upDateTime': '2020-05-30 02:12:12' }, { name: '110警情系统', count: 123456, 'upDateTime': '2020-05-30 12:12:02' }, { name: '110警情系统', count: 123456, 'upDateTime': '2020-04-30 12:12:12' }]
        // $.ajax({
        //     type: "post",
        //     url: tableDataIdUrl,
        //     dataType: "json", //返回数据形式为json
        //     success: function (res) {
        //         console.log(res);
        //         var resultData = res.data
        //         // 每次请求清空表格数据
        //         if (res.status == 200) {
        //             $("#tableDataId").html('')
        //             // 数组冒泡排序
        //             for (var i = 0; i < resultData.length - 1; i++) {
        //                 for (var j = 0; j < resultData.length - i - 1; j++) {
        //                     if (resultData[j].upDateTime < resultData[j + 1].upDateTime) {
        //                         let tmp = resultData[j];
        //                         resultData[j] = resultData[j + 1];
        //                         resultData[j + 1] = tmp;
        //                     }
        //                 }
        //                 // console.log('newArr', data);
        //             }
        //             console.log(resultData);
        //             // 生成表格
        //             for (i = 0; i < resultData.length; i++) {
        //                 if (i % 2) {
        //                     var CreatTr = $("<tr class='bgClassColor'>" +
        //                         "<td>" + resultData[i].name + "</td>" +
        //                         "<td>" + resultData[i].count + "</td>" +
        //                         "<td>" + resultData[i].upDateTime + "</td>" +
        //                         "</tr>");
        //                 } else {
        //                     var CreatTr = $("<tr>" +
        //                         "<td>" + resultData[i].name + "</td>" +
        //                         "<td>" + resultData[i].count + "</td>" +
        //                         "<td>" + resultData[i].upDateTime + "</td>" +
        //                         "</tr>");

        //                 }
        //                 $("#tableDataId").append(CreatTr)
        //             }
        //         }
        //     },
        // });
    }
})